<template>
  <div>
    <div class="desc">
      <div class="left"><img v-lazy="songlistMsg.coverImgUrl" alt=""></div>
      <div class="right">
        <span class="tag_title">歌单</span>
        <div class="title">{{songlistMsg.name}}</div>
        <div class="user-info">
          <img v-lazy="avatarUrl"
               style="width: 28px;height: 28px;
                     border-radius:15px;
                     position: relative;
                     top: 9px;">
          <span style="color: #5070d0;margin-right: 15px">{{nickname}}</span>
          <span>{{showDate}}创建</span>
        </div>
        <div class="operate">
          <div class="play">
            <img src="~@/assets/img/songlistdetail/play.svg" alt="">
            <span @click="playAll">播放全部</span>
          </div>
          <div class="collect">
            <img src="~@/assets/img/songlistdetail/collect.svg" alt="">
            <span>收藏({{songlistMsg.subscribedCount}})</span>
          </div>
          <div class="share">
            <img src="~@/assets/img/songlistdetail/share.svg" alt="">
            <span>分享({{songlistMsg.shareCount}})</span>
          </div>
          <div class="download">
            <img src="~@/assets/img/songlistdetail/download.svg" alt="">
            <span>下载全部</span>
          </div>
        </div>
        <div class="songlist-info">
          <div class="tags">标签: <span>{{tags}}</span></div>
          <div class="count">
            <span>歌曲: {{trackCount}}</span>
            <span>播放: {{playCount}}</span>
          </div>
          <div class="not-show" v-show="isShow">
            <div v-html="this.desReg"></div>
            <div class="triangle-d" @click="showBtn"></div>
          </div>
          <div class="show" v-show="!isShow">
            <div v-html="this.desReg"></div>
            <div class="triangle-u" @click="showBtn"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <NavBarItem :link="songlistLink">歌曲列表</NavBarItem>
      <NavBarItem :link="commentLink">评论({{songlistMsg.commentCount}})</NavBarItem>
      <NavBarItem :link="collectorLink">收藏者 </NavBarItem>
    </div>
  </div>
</template>

<script>
  import NavBarItem from "@/components/content/navbar/NavBarItem";

  import {formatDate} from '@/components/common/utilis'
  export default {
    name: "SonglistDetailDesc",
    components:{
      NavBarItem,
    },
    props:{
      songlistMsg:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data(){
      return {
        isShow:true
      }
    },
    computed:{
      trackCount(){
        return this.songlistMsg.trackCount > 10000 ?
          ((this.songlistMsg.trackCount/10000).toFixed()) + '万' : this.songlistMsg.trackCount
      },
      playCount(){
        return this.songlistMsg.playCount > 10000 ?
          ((this.songlistMsg.playCount/10000).toFixed()) + '万' : this.songlistMsg.playCount
      },
      tags(){
        return this.songlistMsg.tags ? this.songlistMsg.tags.join(' / ') : ''
      },
      avatarUrl(){
        return this.songlistMsg.creator ? this.songlistMsg.creator.avatarUrl : ''
      },
      nickname(){
        return this.songlistMsg.creator ? this.songlistMsg.creator.nickname : ''
      },
      showDate(){
        //1.将时间戳转成Date对象
        const date = new Date(this.songlistMsg.createTime)
        //2.将date进行格式化
        return formatDate(date, 'yyyy-MM-dd')
      },
      desReg(){
        //凡是出现xxx undefined时可以先判断存不存在再返回数据
        return this.songlistMsg.description ? '简介:' + this.songlistMsg.description.replace(/\n/g,'<br>') : ''
      },
      //下面三个函数返回子路由对应的路径
      songlistLink(){
       return '/songlist/detail/id=' + this.songlistMsg.id + '/songlist'
      },
      commentLink(){
       return '/songlist/detail/id=' + this.songlistMsg.id + '/comment'
      },
      collectorLink(){
       return '/songlist/detail/id=' + this.songlistMsg.id + '/collector'
      },

    },
    created() {
    },
    methods:{
      showBtn(){
        this.isShow = !this.isShow
      },
      playAll(){
        this.$bus.$emit('playAll')
      },
    },
  }
</script>

<style scoped>
  .desc{
    padding: 15px 20px;
    display: flex;
  }
  .left{
    width: 180px;
    height: 180px;
  }
  .left img{
    width: 100%;
    border-radius: 4px;
  }
  .right{
    padding: 0 40px;
  }
  .right .tag_title{
    position: absolute;
    top: 22px;
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 3px;
    color: #ff5777;
    border: 1px solid #ec3f60;
  }
  .right .title{
    padding: 6px 40px;
    font-size: 21px;
    font-weight: 600;
    color: #222222;
  }
  .right .user-info{
    font-size: 13px;
    line-height: 30px;
  }
  .right .user-info span:nth-child(1){
    color: #5070D0;
    margin-right: 10px;
  }
  .right .operate{
    display: flex;
  }
  .right .operate>div{
    margin:6px 8px;
    font-size: 14px;
    color: #2a2727;
    padding: 6px 13px;
    border-radius: 15px;
    cursor: pointer;
    border: 1px solid #c1b8b8;
  }
  .right .operate>div:hover{
    background-color: rgba(0,0,0,.05);
  }
  .right .operate .play:hover{
    background-color: rgb(220, 68, 62);
  }
  .right .operate .play{
    background-color: rgb(253,84,78);
    color: #ffffff;
    border: 1px solid transparent;
    margin-left: 0;
  }
  .right .operate .play img{
    width: 14px;
    height: 14px;
  }
  .right .operate img{
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }
  .right .operate span{
    vertical-align: middle;
  }
  .right .songlist-info>div{
    font-size: 13px;
    line-height: 28px;
  }

  .songlist-info .count span:nth-child(2){
    margin-left: 15px;
  }
  .not-show div:nth-child(1){
    width: 250px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 自定义的行数 */
    overflow: hidden;
  }

  .show{
    width: 250px;
    position: relative;
  }
  .show .triangle-u{
    cursor: pointer;
    position: absolute;
    left: 800px;
    top: 4px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom: 7px solid #c1b8b8;
  }
  .not-show .triangle-d{
    cursor: pointer;
    position: relative;
    top: -16px;
    left: 800px;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: 7px solid #c1b8b8;
  }
  .footer{
    display: flex;
  }
</style>
